<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>view事件监听v-on</title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 在前端开发中，我们需要经常监听事件，经常要进行交互 -->
        <!-- 比如单击，拖拽，键盘事件等等 -->
        <!-- 这就需要事件的监听，在Vue实现方式通过指令v-on实现 -->
        <!-- 作用
        绑定事件监听器 语法糖 @
        可以定义为 function | inline statement | object
        参数 event
        -->
        <!-- v-on指令是用来绑定DOM事件监听的。 -->
        {{counter}}
        <br>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
        <br>
        <!-- 没有参数时候可以省略(), 且需要传参，默认传事件本身event-->
        <!-- 如果有参数，则不可以省略(),否则为undefined  -->
        <button @click="increase">+</button>
        <!-- 如果我需要参数event本身 ，$event, 注意没有$符号是找不到event-->
        <button @click="decrease(12,$event)">-</button>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{ 
                counter:0
            },
            methods:{
                increase(event){
                    console.log(event);
                    this.counter++
                },
                decrease(abc,event){
                    console.log(event);
                    console.log(abc);
                    this.counter--
                }
            }
        })
    </script> 
</body>
</html>